<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>忘记密码了</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">

    <!-- CSS
	============================================ -->
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
    <!-- Icon Font CSS -->
    <link rel="stylesheet" href="assets/css/vendor/bicon.min.css">
    <!-- Flat Icon CSS -->
    <link rel="stylesheet" href="assets/css/vendor/flaticon.css">
    <!-- audio & video player CSS -->
    <link rel="stylesheet" href="assets/css/plugins/plyr.css">
    <!-- Slick CSS -->
    <link rel="stylesheet" href="assets/css/plugins/slick.min.css">
    <!-- nice-select CSS -->
    <link rel="stylesheet" href="assets/css/plugins/nice-select.css">
    <!-- perfect scrollbar css -->
    <link rel="stylesheet" href="assets/css/plugins/perfect-scrollbar.css">
    <!-- light gallery css -->
    <link rel="stylesheet" href="assets/css/plugins/lightgallery.min.css">
    <!-- Main Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
	<script src="assets/js/vendor/jquery-3.3.1.min.js"></script>

</head>

<body class="bg-transparent">

    <main>
        <div class="main-wrapper pb-0 mb-0">
            <div class="timeline-wrapper">
                <div class="timeline-header">
                    <div class="container-fluid p-0">
                        <div class="row no-gutters align-items-center">
                            <div class="col-lg-6">
                                <div class="timeline-logo-area d-flex align-items-center">
                                    <div class="timeline-logo">
                                        <a href="index.html">
                                            <img src="assets/images/logo/logo.png" alt="timeline logo">
                                        </a>
                                    </div>
                                    <div class="timeline-tagline">
                                        <h6 class="tagline">欢迎来到xxx网站，这里可以分享你的趣事</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="login-area">
                                    <div class="row align-items-center" >
                                        <div class="col-12 col-sm">
                                            <p class="lead" style="color: #D6E9C6;">人生得一知已足矣，斯世当以同怀视之。——鲁迅</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="timeline-page-wrapper">
                    <div class="container-fluid p-0">
                        <div class="row no-gutters">
                            <div class="col-lg-6 order-2 order-lg-1">
                                <div class="timeline-bg-content bg-img" data-bg="assets/images/timeline/adda-timeline.jpg">
                                    <h3 class="timeline-bg-title">Let’s see what’s happening to you and your world. Welcome in Adda.</h3>
                                </div>
                            </div>
                            <div class="col-lg-6 order-1 order-lg-2 d-flex align-items-center justify-content-center">
                                <div class="signup-form-wrapper">
                                    <h1 class="create-acc text-center">修改密码</h1>
                                    <div class="signup-inner text-center">
                                      <!-- <h3 class="title">Wellcome to wefun</h3> -->
                                        <form class="signup-inner--form">
                                            <div class="row">
                                                <div class="col-12">
                                                    <input type="text" id="username"class="single-field" placeholder="用户名">
                                                </div>
                                                <div class="col-12">
                                                    <input type="password"id="password" class="single-field" placeholder="新密码">
                                                </div>
                                                <div class="col-12">
                                                    <input type="password" class="single-field" placeholder="确认密码">
                                                </div>
                                    
													<div class="col-12" style="margin-top:-5px;">
														<span style="margin-left: inherit;float: left;height: 20px;" id="phoneMsg"></span>
													</div>
													 <div class="col-12">
                                                    <input type="text" id="phonenumber" class="single-field" placeholder="手机号">
                                                   <!-- <select class="nice-select" name="sortby">
                                                        <option value="trending">性别</option>
                                                        <option value="sales">男</option>
                                                        <option value="sales">女</option>
                                                    </select> -->
                                                </div>
												<div class="col-12">
													<span style="margin-left: inherit;float: left;height: 20px;" id="codeMsg"></span>
												</div>
                                                <div class="col-6">
                                                    <input type="text" name="code" class="single-field" placeholder="验证码">

                                                   <!-- <select class="nice-select" name="sortby">
                                                         <option value="trending">性别</option>
                                                         <option value="sales">男</option>
                                                         <option value="sales">女</option>
                                                     </select> -->
                                                </div>
												 <div class="col-6 "style="margin-top: -90px; margin-left: 280px;">
												<button type="button" id="getPhoneCode"class="submit-btn" style="width: 150px;height: 40px;padding-top:12px; float: left;">获取验证码</button>
                                                 </div>
												  <!-- <div class="col-md-6">
                                                    <select class="nice-select" name="sortby">
                                                        <option value="trending">Age</option>
                                                        <option value="sales">18+</option>
                                                        <option value="sales">18-</option>
                                                    </select>
                                                </div>
                                                <div class="col-12">
                                                    <select class="nice-select" name="sortby">
                                                        <option value="trending">Country</option>
                                                        <option value="sales">Bangladesh</option>
                                                        <option value="sales">Noakhali</option>
                                                        <option value="sales">Australia</option>
                                                        <option value="sales">China</option>
                                                    </select>
                                                </div> -->
                                                <div class="col-12">
                                                    <button class="submit-btn">确认修改</button>
                                                </div>
                                            </div>
                                           <!-- <h6 class="terms-condition">I have read & accepted the <a href="#">terms of use</a></h6> -->
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
	<script type="text/javascript">
$("#getPhoneCode").click(function () {
	//alert(1);
        let phoneError=/^1[3|4|5|6|7|8|9]\d{9}$/;
               //只发送请求不需要回调
               var phoneNumber = $("#phonenumber").val();
               if (phoneNumber == ''||!phoneError.test(phoneNumber)) {
				   //alert(1);
                  $("#phoneMsg").text("笨蛋，电话错了").css(
				  {
					  color:'#ff0000',
					  
				  });
				   return false;
                    
			 }
			 })
		 $("#getPhoneCode").click(function () {
		            //每次发送短信验证码的时候,需要重设计时器的时间
		            time = 60;
		            //只发送请求不需要回调
		            $.get("/sys/getPhoneCode?phone=" + $("#phonenumber").val());
		            //触发定时器的启动 ,使用变量接受定时器,方便后面进行定时器的清除
		            timer = setInterval(countDown, 1000);
		            //设置发送短信的按钮为禁用
		            $(this).prop("disabled", true);
					$("#getPhoneCode").css({
						background:'#b3b3b3',
					})
					})
					function countDown() 
					{
					        //函数 定时器要执行的方法函数
					        time--;
					        if (time <= 0) {
					            //清除定时器
					            clearInterval(timer);
					            //解开发送短信按钮的禁用
					            $("#getPhoneCode").prop("disabled", false);
					            $("#getPhoneCode").text("获取验证码").addClass("submit-btn");
					        } else {
					            $("#getPhoneCode").text(time);
					        }
		}
       $("[name='code']").change(function () {
            var code = $(this).val();
            $.get("/sys/checkPhoneCode?code="+code,function (result) {
                if (result=="OK"){
                    $("#codeMsg").text("验证码正确").css({"color":"green"})
                }else{
                    $("#codeMsg").text("验证码错误..^_^").css({"color":"red"})
                    $("#code").click();
                }
            });
        });

   
	</script>
    <!-- JS
============================================ -->
  
    <!-- Modernizer JS -->
    <script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
    <!-- jQuery JS -->
   
    <!-- Popper JS -->
    <script src="assets/js/vendor/popper.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="assets/js/vendor/bootstrap.min.js"></script>
    <!-- Slick Slider JS -->
    <script src="assets/js/plugins/slick.min.js"></script>
    <!-- nice select JS -->
    <script src="assets/js/plugins/nice-select.min.js"></script>
    <!-- audio video player JS -->
    <script src="assets/js/plugins/plyr.min.js"></script>
    <!-- perfect scrollbar js -->
    <script src="assets/js/plugins/perfect-scrollbar.min.js"></script>
    <!-- light gallery js -->
    <script src="assets/js/plugins/lightgallery-all.min.js"></script>
    <!-- image loaded js -->
    <script src="assets/js/plugins/imagesloaded.pkgd.min.js"></script>
    <!-- isotope filter js -->
    <script src="assets/js/plugins/isotope.pkgd.min.js"></script>
    <!-- Main JS -->
    <script src="assets/js/main.js"></script>
	

</body>

</html>